<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2020年中大作战</title>

    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/swiper.css" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.css"
      rel="stylesheet"
    />
    <style>
      /* @font-face {
        font-family: "PingFang SC";
        src: url("./fonts/FZ.TTF") format("truetype");
      } */
    </style>
    <script>
      function isMobile() {
        var browser = {
          versions: (function () {
            var u = navigator.userAgent,
              app = navigator.appVersion;
            return {
              //移动终端浏览器版本信息
              trident: u.indexOf("Trident") > -1, //IE内核
              presto: u.indexOf("Presto") > -1, //opera内核
              webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
              gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
              mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
              ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
              android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
              iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
              iPad: u.indexOf("iPad") > -1, //是否iPad
              webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
            };
          })(),
          language: (
            navigator.browserLanguage || navigator.language
          ).toLowerCase(),
        };

        return browser.versions.mobile;
      }
      if (isMobile()) {
        window.location.href='https://m.jjrw.com/#/doBattle'
      }
    </script>
  </head>

  <body>
    <header>
      <img src="./img/header.png" alt="" />
      <div class="erweima">
        <img src="./img/ewm.png" alt="" />
      </div>
    </header>
    <section class="contant" id="app" style="opacity: 0;">
      <div class="tiaofu1" style="left: 0;">
        <span>
          <img src="./img/left.png" alt="" />
        </span>
        <span>
          <img src="./img/tf.png" alt="" />
        </span>
      </div>

      <div class="tiaofu1" style="right: 0;">
        <span>
          <img src="./img/right.png" alt="" />
        </span>
        <span>
          <img src="./img/tf.png" alt="" />
        </span>
      </div>

      <div class="card1">
        <div class="card_title">
          <img src="./img/card1_T.png" alt="" width="280px" />
        </div>
        <div style="width: 744px; height: 390px; margin-top: -10px;" >
          <div class="banner-card" style="height: 390px;" id="swiper1" ref="swiper1">
            <ul class="ul swiper1_bg">
              <li
                style="width: 624px;"
                data-id="1"
                v-for="(item, index) in card1"
                :key="item.id"
              >
                <!-- <img src="./img/card1/swipe.png" alt="" /> -->
                <div class="swiper1_contant">
                  <div
                    class="swiper1_contant_top"
                    @click="openConpany(item.coid)"
                  >
                    <div class="swiper1_contant_img"></div>
                    <div class="swiper1_contant_text">
                      <span>{{item.co}}</span>
                      <div>
                        <span>
                          <img src="./img/loc.png" alt="" width="22px" />
                          <i>{{item.area}}</i>
                        </span>
                        <span>
                          <img src="./img/tag.png" alt="" width="24px" />
                          <i>{{item.hy}}</i>
                        </span>
                        <span>
                          <img src="./img/pop.png" alt="" width="22px" />
                          <i>{{item.rs}}</i>
                        </span>
                      </div>
                      <p>{{item.gm}}</p>
                    </div>
                  </div>
                  <div
                    class="swiper1_contant_job"
                    @click="jumpJob(item.job.jbid)"
                  >
                    <span>{{item.job.jb}}</span>
                    <span>{{item.job.xz}}</span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="left-btn" id="swiper1_left">
              <img src="./img/card1/leftbtn.png" alt="" />
            </div>
            <div class="right-btn" id="swiper1_right">
              <img src="./img/card1/rightbtn.png" alt="" />
            </div>
            <img src="./img/card1/ms.png" alt="" class="mucie" />
            <span class="progress">
              <span
                :style="[{width:card1Progress+'px'},{transform:`translateX(${card1Index*card1Progress}px)`}]"
              ></span>
            </span>
          </div>
        </div>
      </div>

      <div class="card2">
        <div class="card2_title">
          <img src="./img/card2/title.png" alt="" />
        </div>
        <div class="card2_swiper" style="width: 624px;">
          <div class="card2_swiper_header">

          </div>
          <div class="swiper-container" id="swiper3">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide swiper2_box_bg"
                v-for="(item, index) in card2"
                :key="index"
              >
                <div
              class="swiper2_contant_top" @click.stop="openConpany(item.coid,false)">
                  <div class="swiper2_img" :style="{backgroundImage:`url(${item.bg})`}"></div>
                  <div class="swiper2_text">
                    <span>{{item.co}}</span>
                    <div>
                      <span>
                        <img src="./img/loc.png" alt="" width="22px" />
                        <i>{{item.area}}</i>
                      </span>
                      <span>
                        <img src="./img/tag.png" alt="" width="24px" />
                        <i>{{item.hy}}</i>
                      </span>
                      <span>
                        <img src="./img/pop.png" alt="" width="22px" />
                        <i>{{item.gm}}</i>
                      </span>
                    </div>
                    <p>{{item.xz}}</p>
                  </div>
                </div>
                <div class="swiper2_job">
                  <div
                    v-for="(second, i) in item.job"
                    :key="item.jbid"
                    @click.stop="jumpJob(second.jbid)"
                  >
                    <span>{{second.job}}</span>
                    <span>{{second.xz}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <span class="card2_le">
            <img src="./img/card2/le.png" alt="" />
          </span>
          <span class="card2_ri">
            <img src="./img/card2/ri.png" alt="" />
          </span>

          <div class="card2_progress">
            <span
              class="card2_pro_c"
              :style="[{width:card2Progress+'px'},{transform: `translateX(${card2Index*card2Progress}px)`}]"
            ></span>
          </div>
          <div class="card2_mu">
            <img src="./img/card2/mu.png" alt="" />
          </div>
        </div>
      </div>

      <div class="card3">
        <div class="card3_title">
          <img src="./img/card3/title.png" alt="" />
        </div>
        <div class="card3_swiper" style="width: 624px;">
          <div class="card3_swiper_header">

          </div>
          <div class="swiper-container" id="swiper4">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide swiper4_bg"
                v-for="(item, index) in card3"
                :key="index"
              >
                <div
                  class="swiper4_top"
                  @click.stop="openConpany(item.coid,false)"
                >
                  <div class="swiper4_img" :style="{backgroundImage:`url(${item.bg})`}"></div>
                  <div class="swiper4_text">
                    <span>{{item.co}}</span>
                    <div>
                      <span>
                        <img src="./img/loc.png" alt="" width="22px" />
                        <i>{{item.area}}</i>
                      </span>
                      <span>
                        <img src="./img/tag.png" alt="" width="24px" />
                        <i>{{item.hy}}</i>
                      </span>
                      <span>
                        <img src="./img/pop.png" alt="" width="22px" />
                        <i>{{item.gm}}</i>
                      </span>
                    </div>
                    <p>{{item.xz}}</p>
                  </div>
                </div>
                <div class="swiper4_job">
                  <div
                    v-for="(second, i) in item.job"
                    :key="i"
                    @click.stop="jumpJob(second.jbid)"
                  >
                    <span>{{second.job}}</span>
                    <span>{{second.xz}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <span class="card3_le">
            <img src="./img/card3/le.png" alt="" />
          </span>
          <span class="card3_ri">
            <img src="./img/card3/ri.png" alt="" />
          </span>
        </div>

        <div class="card3_pro">
          <span
            class="card3_c"
            :style="[{width:478/card3.length +'px'},{transform: `translateX(${card3Index*(478/card3.length)}px)`}]"
          ></span>
        </div>
      </div>

      <div class="card4">
        <div class="hand">
          <img src="./img/card3/hand.png" alt="" />
        </div>
        <div class="card4_title">
          <img src="./img/card4/jz.png" alt="" />
        </div>
        <div style="width: 744px; height: 390px; margin-top: -15px;" ref="swiper2">
          <div class="banner-card" style="height: 390px;" id="swiper2">
            <ul class="ul swiper_last">
              <li v-for="(item, index) in card4[activeIndex]" :key="index">
                <div
                  class="swiper_last_top"
                  @click="openConpany(item.coid,false)"
                >
                  <div :style="{backgroundImage:`url(${item.bg})`}"></div>
                  <div>
                    <span>{{item.co}}</span>
                    <div>
                      <span>
                        <img src="./img/loc.png" alt="" width="22px" />
                        <i>{{item.area}}</i>
                      </span>
                      <span>
                        <img src="./img/tag.png" alt="" width="24px" />
                        <i>{{item.hy}}</i>
                      </span>
                      <span>
                        <img src="./img/pop.png" alt="" width="22px" />
                        <i>{{item.rs}}</i>
                      </span>
                    </div>
                    <p>{{item.gm}}</p>
                  </div>
                </div>
                <div class="swiper_last_job">
                  <div
                    v-for="(second, i) in item.job"
                    :key="i"
                    @click="jumpJob(second.jbid)"
                  >
                    <span>{{second.job}}</span>
                    <span>{{second.xz}}</span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="left-btn" id="swiper2_left" style="left: 28px;">
              <img src="./img/card1/leftbtn.png" alt="" />
            </div>
            <div class="right-btn" id="swiper2_right" style="right: 28px;">
              <img src="./img/card1/rightbtn.png" alt="" />
            </div>
          </div>
        </div>

        <div class="area">
          <span
            v-for="(item, index) in area"
            :key="index"
            @click="selectArea(index)"
            :class="index==activeIndex?'active':''"
            >{{item}}</span
          >
        </div>
      </div>
      <footer style="align-self: flex-end;">
        <img src="./img/footer.png" alt="" />
      </footer>
    </section>
  </body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script src="./js/swiper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/card_first.js"></script>
<script src="./js/index.js"></script>
